<template>
	<view class="">
		<view class="content">
			<view class="grey flex m-t-20">我的当前定位<text class="iconfont icon-shuaxin m-l-10" @click="addFn"></text></view>
			<!-- <uv-radio-group placement="column"> -->
			<view class="flex_b">
				<view class="flex">
					<text class="iconfont icon-weizhi grey m-r-10"></text>
					<text v-if="station.province_name||station.name">{{station.province_name}},{{station.city_name}},{{station.name}}</text>
					<text v-else @click="addFn">大连</text>
				</view>
				<view class="m-t-30">
					<view class="w-80 h-50 textC white" v-if="station.province_name||station.name"
						style="background-color: #ff5e0f;border-radius: 10rpx;line-height: 50rpx;" @click="myAddSubmit">使用</view>
					<!-- <uv-radio shape="square" activeColor="#ff5e0f" name="AAA"></uv-radio> -->
				</view>
			</view>
			<!-- </uv-radio-group> -->
			<view class="grey flex m-t-10">选择位置</view>
			<picker-view :indicator-style="indicatorStyle" class="picker-view" @change="change">
				<picker-view-column :value="value">
					<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in city" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in area" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>

		</view>
		<view class="bomPosition">
			<!-- $util.redirectTo('/frompages/address/address') -->
			<button type="primary" @click="submitB">确认使用</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				province: [],
				city: [],
				indicatorStyle: `height: 50px;`,
				value: [0, 0,0],
				latitude:'',
				longitude:'',
				station:{},
				area:[]
			};
		},
		onLoad() {
			this.provinceList()
		},
		onShow() {
			this.authCLcation()
		},
		methods: {
			myAddSubmit() {
				let obj = {
					title:this.station.province_name+','+this.station.city_name+','+this.station.name,
					province_id:this.station.province_id,
					city_id:this.station.pid,
					area_id:this.station.id
				}
				uni.$emit('province',obj)
				uni.navigateBack({
					delta:1
				})
			},
			submitB() {
				let provinceItem = this.province[this.value[0]]
				let cityItem = this.city[this.value[1]]
				let areaItem = this.area[this.value[2]]
				console.log(areaItem);
				let obj = {
					title:provinceItem.name+','+cityItem.name+','+areaItem.name,
					province_id:provinceItem.id,
					city_id:cityItem.id,
					area_id:areaItem.id
				}
				uni.$emit('province',obj)
				uni.navigateBack({
					delta:1
				})
			},
			
			change(e) {
				console.log(e);
				if (this.value[0] != e.detail.value[0]) {
					this.cityList(this.province[e.detail.value[0]].id)
				}
				if (this.value[1] != e.detail.value[1]) {
					this.areaList(this.city[e.detail.value[1]].id)
				}
				this.value = e.detail.value
			},
			provinceList() {
				this.$api.sendRequest({
					url: '/api/Index/areaList',
					data: {
						pid: ''
					},
					success: res => {
						this.province = res.data
						this.cityList(res.data[0].id)
					}
				})
			},
			cityList(id) {
				this.$api.sendRequest({
					url: '/api/Index/areaList',
					data: {
						pid: id || ''
					},
					success: res => {
						this.city = res.data
						this.areaList(res.data[0].id)
					}
				})
			},
			areaList(id) {
				this.$api.sendRequest({
					url: '/api/Index/areaList',
					data: {
						pid: id || ''
					},
					success: res => {
						this.area = res.data
					}
				})
			},
			// 获取位置
			addFn() {
				let that = this
				uni.getSetting({
					success: function(res) {
						var statu = res.authSetting;
						if (!statu['scope.userLocation']) {
							uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
								success(tip) {
									if (tip.confirm) {
										uni.openSetting({
											success: function(data) {
												console.log(data, 'dadadadad');
												if (data.authSetting[
														'scope.userLocation'
													] === true) {
													this.$util.showToast({
														title: '授权成功'
													});
													that.authCLcation()
													//授权成功之后，再调用chooseLocation选择地方
												}
											}
										});
									} else {
										this.$util.showToast({
											title: '授权失败'
										});
									}
								}
							});
						}
					}
				});
			},
			// 根据经纬度获取城市信息
			tranAddressInfo(lat,lng) {
				this.$api.sendRequest({
					url:'/api/index/stationList',
					data:{
						lat:lat,
						lng:lng
					},success:res=>{
						this.station = res.data
					}
				})
			},
			authCLcation() {
				let that = this
				// 位置授权
				uni.authorize({
					scope: 'scope.userLocation',
					success: res => {
						uni.showLoading({
							title: '获取当前位置'
						})
						// 获取当前位置的经纬度
						uni.getLocation({
							success: res => {
								console.log(res);
								this.latitude = res.latitude
								this.longitude = res.longitude
								uni.hideLoading()
								this.tranAddressInfo(res.latitude, res.longitude)
							},
							fail: err => {
								console.log(err, '错误信息')
								uni.hideLoading()
								this.$util.showToast({
									title: '获取位置失败'
								})
								this.addFn()
							}
						})
					},
					fail: err => {
						console.log(err, 'err');
						uni.hideLoading()
					}
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 0;
		padding: 30rpx;
	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #f6f6f6 !important;

		/deep/ picker-view-column {
			background-color: #f6f6f6 !important;
		}
	}

	/deep/ picker-view-column {
		background-color: #f6f6f6 !important;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
	}
</style>
